<template>
  <picker
    mode="time"
    start="00:00"
    :value="selectedVal"
    @change="bindDateChange"
  >
    <input
      mode="wrapped"
      :value="selectedVal"
      placeholder="时间"
      maxlength="999999"
      disabled
    >
  </picker>
</template>

<script>
export default {
  components: {},
  props: {
    date: {
      type: String,
      required: false,
      default: ''
    }
  },
  data () {
    return {
      selectedVal: ''
    }
  },
  computed: {
    val () {
      if (this.selectedVal) {
        return this.selectedVal
      } else {
        return ''
      }
    }
  },
  watch: {
    date (val) {
      this.selectedVal = val
    }
  },
  created () {
    this.selectedVal = this.date
  },
  mounted () {},
  onShow () {
    if (this.date) {
      this.selectedVal = this.date
    } else {
      this.selectedVal = ''
    }
  },
  methods: {
    bindDateChange (e) {
      this.selectedVal = e.target.value
      this.$emit('change', this.selectedVal)
    }
  }
}
</script>